﻿<!--@Knockout-->
<div style="height:390px; max-width:630px; margin:0 auto" data-bind="dxDataGrid: {
    dataSource: books,
    columns: columns,
    paging: { pageSize: 7 },
    groupPanel: {
        visible: true,
        emptyPanelText: emptyPanelText
    }
}"></div>
<div style="width:300px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Enter a text for the empty group panel',
    valueChangeEvent: 'keyup',
    height: 40,
    width: 300,
    value: emptyPanelText
}"></div>
<!--/@Knockout-->
<!--@AngularJS-->
<div style="height:450px" ng-controller="demoController">
    <div style="height:390px; max-width:630px; margin:0 auto" dx-data-grid="{
        dataSource: books,
        columns: columns,
        paging: { pageSize: 7 },
        groupPanel: { visible: true },
        bindingOptions: {
            'groupPanel.emptyPanelText': 'emptyPanelText'
        }
    }"></div>
    <div style="width:300px; margin:0 auto;" ng-model="emptyPanelText" dx-text-box="{
        placeholder: 'Enter a text for the empty group panel',
        valueChangeEvent: 'keyup',
        height: 40,
        width: 300
    }"></div>
</div>
<!--/@AngularJS-->
<!--@jQuery-->
<div id="gridContainer" style="height: 380px; max-width: 800px; margin: 0 auto"></div>
<div id="emptyPanelTextBox" style="height: 45px; width: 280px; margin:0 auto"></div>
<!--/@jQuery-->